<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'>
    <link href='https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css' rel='stylesheet'/>
    <link rel="stylesheet" href="scss/dist/app.css">
    <title>mi-flex</title>
</head>
<body>
    <header>
        <!-- 顶部搜索条开始 -->
        <div class="search">
          <div class="logo">
            <img src="images/milogo.png">
          </div>
          <div class="input">
              <i class="fa fa-search" aria-hidden="true"></i>
              <input type="text" placeholder="搜索商品名称">
          </div>
          <div class="user">
             <i class="fa fa-user-o" aria-hidden="true"></i>
          </div>
        </div>
        <!-- 顶部搜索条结束 -->
        <nav>
            
            <!-- <div class="category">
                <h2>全部</h2>
                <ul>
                    <li><a href="#" class="active">推荐</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">智能</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">生活周边</a></li>
                </ul>
            </div> -->
            <div class="links">
                <a href="#" class="active">推荐</a>
                <a href="#">手机</a>
                <a href="#">智能</a>
                <a href="#">电视</a>
                <a href="#">笔记本</a>
                <a href="#">家电</a>
            </div>
            <input type="checkbox" id="ck1"  hidden/>
            <label for="ck1">
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </label>
        </nav>
    </header>
    <main>
        <div class="slide">
            <a href="#"><img src="images/s1.jpg" ></a>
        </div>
        <div class="menu">
            <a href="#"><img src="images/1.png" ></a>
            <a href="#"><img src="images/2.webp" ></a>
            <a href="#"><img src="images/3.webp" ></a>
            <a href="#"><img src="images/4.webp" ></a>
            <a href="#"><img src="images/5.webp" ></a>
            <a href="#"><img src="images/6.webp" ></a>
            <a href="#"><img src="images/7.png" ></a>
            <a href="#"><img src="images/8.png" ></a>
            <a href="#"><img src="images/9.webp" ></a>
            <a href="#"><img src="images/10.png" ></a>
        </div>
        <div class="hot">
            <a href="#"><img src="images/z1.webp" alt=""></a>
            <div>
                <a href="#"><img src="images/y1.webp" alt=""></a>
                <a href="#"><img src="images/y2.webp" alt=""></a>
            </div>
        </div>
        <div class="ad">
            <a href="#"><img src="images/ad1.webp" alt=""></a>
            <a href="#"><img src="images/ad2.webp" alt=""></a>
        </div>
        <div class="goods">
            <div class="goods-pic">
            <a href="#">
                <div class="preview">
                    <img src="images/g1.jpg" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/g2.jpg" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/g3.jpg" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/g4.jpg" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/g5.jpg" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/g6.jpg" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
        </div>
            <div class="more">
                <h2>更多小米手机产品&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></h2>
            </div>
        </div>
        <!-- <div class="ad">
            <a href="#"><img src="images/ad7.webp" alt=""></a>
        </div>
        <div class="goods">
            <div class="goods-pic">
            <a href="#">
                <div class="preview">
                    <img src="images/gds1.webp" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/gds1.webp" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/gds1.webp" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/gds1.webp" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/gds1.webp" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/gds1.webp" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
        </div>
            <div class="more">
                <h2>更多小米电视产品&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></h2>
            </div>
        </div>
        <div class="ad">
            <a href="#"><img src="images/ad3.webp" alt=""></a>
            <a href="#"><img src="images/ad4.webp" alt=""></a>
        </div>
        <div class="goods">
            <div class="goods-pic">
            <a href="#">
                <div class="preview">
                    <img src="images/gbjb1.jpg" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/gbjb1.jpg" >
                </div>
                <h3>小米10 Pro</h3>
                <div class="info">骁龙865 / 50倍变焦</div>
                <div class="price">￥4999
                    <span>起</span>
                </div>
                <div class="cart">立即购买</div>
            </a>
        </div>
            <div class="more">
                <h2>更多小米笔记本产品&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></h2>
            </div>
        </div>
        <div class="ad">
            <a href="#"><img src="images/ad5.webp" alt=""></a>
            <a href="#"><img src="images/ad6.webp" alt=""></a>
        </div>
        <div class="goods jd">
            <div class="goods-pic">
            <a href="#">
                <div class="preview">
                    <img src="images/jd1.webp" >
                </div>
                <h3>变频 | 米家互联网空调 1.5匹</h3>
                <div class="info">变频节能，高效制冷热</div>
                <div class="price">￥4999</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/jd2.jpg" >
                </div>
                <h3>米家洗烘一体机Pro </h3>
                <div class="info">智能洗烘，省心省力</div>
                <div class="price">￥4999</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/jd1.webp" >
                </div>
                <h3>变频 | 米家互联网空调 1.5匹</h3>
                <div class="info">变频节能，高效制冷热</div>
                <div class="price">￥4999</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/jd2.jpg" >
                </div>
                <h3>米家洗烘一体机Pro </h3>
                <div class="info">智能洗烘，省心省力</div>
                <div class="price">￥4999</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/jd1.webp" >
                </div>
                <h3>变频 | 米家互联网空调 1.5匹</h3>
                <div class="info">变频节能，高效制冷热</div>
                <div class="price">￥4999</div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/jd2.jpg" >
                </div>
                <h3>米家洗烘一体机Pro </h3>
                <div class="info">智能洗烘，省心省力</div>
                <div class="price">￥4999</div>
            </a>
        </div>
            <div class="more">
                <h2>更多小米家电产品&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></h2>
            </div>
        </div>
        <div class="ad">
            <a href="#"><img src="images/ad8.jpg" alt=""></a>
            <a href="#"><img src="images/ad9.webp" alt=""></a>
        </div>
        <div class="goods jd mj">
            <div class="goods-mj">
            <a href="#">
                <div class="preview">
                    <img src="images/mj1.jpg" >
                </div>
                <div class="detail">
                    <h3>米家直流变频落地扇1X</h3>
                    <div class="info">模拟自然风算法 支持AI语音</div>
                    <div class="price">￥4999</div>
                </div>
            </a>
            <a href="#">
                <div class="detail">
                    <h3>米家直流变频落地扇1X</h3>
                    <div class="info">模拟自然风算法 支持AI语音</div>
                    <div class="price">￥4999</div>
                </div>
                <div class="preview">
                    <img src="images/mj2.jpg" >
                </div>
            </a>
            <a href="#">
                <div class="preview">
                    <img src="images/mj3.jpg" >
                </div>
                <div class="detail">
                    <h3>米家直流变频落地扇1X</h3>
                    <div class="info">模拟自然风算法 支持AI语音</div>
                    <div class="price">￥4999</div>
                </div>
            </a>  
        </div>
            <div class="more">
                <h2>更多米家智能产品&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></h2>
            </div>
        </div> -->
        <!-- <div class="other">
            <a href="#"><img src="images/o1.webp"></a>
            <a href="#"><img src="images/o2.webp"></a>
            <a href="#"><img src="images/o3.webp"></a>
            <a href="#"><img src="images/o4.webp"></a>
            <a href="#"><img src="images/o5.webp"></a>
            <a href="#"><img src="images/o6.webp"></a>
        </div>
        <div class="ad">
            <a href="#"><img src="images/ad10.webp" alt=""></a>
        </div>
        <div class="about">
            <h2>了解小米</h2>
            <i class="fa fa-angle-right" aria-hidden="true"></i>
        </div> -->
    </main>
    <footer>
       <a href="" class="active">
           <i class="fa fa-home" aria-hidden="true" ></i>
        首页</a>
       <a href="">
        <i class="fa fa-bars" aria-hidden="true"></i>
        分类</a>
       <a href="">
        <i class="fa fa-globe" aria-hidden="true"></i> 
        星球</a>
        <a href="">
        <i class="fa fa-cart-plus" aria-hidden="true"></i>
        购物车</a>
        <a href="">
        <i class="fa fa-user-o" aria-hidden="true"></i>
         我的</a>
    </footer>
</body>
</html>